<div #formPanel>
  <div nz-row>
    <div nz-col nzSpan="5">提示信息</div>
    <div nz-col class="text-left">
      <dhl-button name="通知失败" icon="line-chart" (buttonClick)="notifyError()"></dhl-button>
      <dhl-button name="通知成功" icon="line-chart" (buttonClick)="notifySuccess()"></dhl-button>
      <dhl-button name="通知信息" icon="line-chart" (buttonClick)="notifyInfo()"></dhl-button>
      <dhl-button name="信息提示" icon="line-chart" (buttonClick)="info()"></dhl-button>
      <dhl-button name="成功提示" icon="line-chart" (buttonClick)="success()"></dhl-button>
      <dhl-button name="失败提示" icon="line-chart" (buttonClick)="error()"></dhl-button>
      <dhl-confirm-button name="交互提示" icon="line-chart" content="是否要继续?"></dhl-confirm-button>
    </div>
  </div>
  <nz-divider></nz-divider>
  <div nz-row>
    <div nz-col nzSpan="5">按钮大小</div>
    <div nz-col class="text-left">
      <dhl-button name="small" icon="line-chart" [sizeType]="btnSizeSmall"></dhl-button>
      <dhl-button name="default" icon="line-chart" [sizeType]="btnSizeDefault"></dhl-button>
      <dhl-button name="large" icon="line-chart" [sizeType]="btnSizeLarge"></dhl-button>
      <dhl-submit-button name="submit-button" icon="line-chart"></dhl-submit-button>
    </div>
  </div>
  <nz-divider></nz-divider>
  <div nz-row>
    <div nz-col nzSpan="5">按钮样式</div>
    <div nz-col class="text-left">
      <dhl-button name="primary" icon="line-chart" [type]="btnTypePrimary"></dhl-button>
      <dhl-button name="default" icon="line-chart" [type]="btnTypeDefault"></dhl-button>
      <dhl-button name="danger" icon="line-chart" [type]="btnTypeDanger"></dhl-button>
      <dhl-button name="dashed" icon="line-chart" [type]="btnTypeDashed"></dhl-button>
      <dhl-button name="gray" icon="line-chart" [type]="btnTypeGray"></dhl-button>
      <dhl-button name="disable" icon="line-chart" [type]="btnTypePrimary" [disabled]="disable"></dhl-button>
      <dhl-button name="changeDisable" icon="line-chart" (buttonClick)="available()"></dhl-button>
      <dhl-button name="link" icon="line-chart" [type]="btnTypeLink" (buttonClick)="linkClick()"></dhl-button>
    </div>
  </div>

  <nz-divider></nz-divider>

  <div nz-row>
    <div nz-col nzSpan="5">弹窗</div>
    <div nz-col class="text-left" nzSpan="5">
      <dhl-button name="弹窗" icon="line-chart" (buttonClick)="click()"></dhl-button>
      <dhl-button name="抽屉弹窗" icon="line-chart" (buttonClick)="clickDrawer()"></dhl-button>
    </div>
  </div>

  <nz-divider></nz-divider>

  <div nz-row>
    <div nz-col nzSpan="5">标签</div>
    <div nz-col class="text-left" nzSpan="10">
      <dhl-tag [text]="'green'" [color]="tagGreen"></dhl-tag>
      &nbsp;&nbsp;&nbsp;
      <dhl-tag [text]="'grey'" [color]="tagGrey"></dhl-tag>
      &nbsp;&nbsp;&nbsp;
      <dhl-tag [text]="'yellow'" [color]="tagYellow"></dhl-tag>
      &nbsp;&nbsp;&nbsp;
      <dhl-tag [text]="'red'" [color]="tagRed"></dhl-tag>
    </div>
  </div>

  <div nz-row>
    <div nz-col nzSpan="5">开关</div>
    <div nz-col class="text-left" nzSpan="10">
      <dhl-switch [value]="true" [colorType]="switchGreen"></dhl-switch>
      <dhl-switch [value]="true" [colorType]="switchGrey"></dhl-switch>
      <dhl-switch [value]="true" [colorType]="switchYellow"></dhl-switch>
      <dhl-switch [value]="true" [colorType]="switchRed"></dhl-switch>
    </div>
  </div>

  <nz-divider></nz-divider>

  <div nz-row>
    <div nz-col nzSpan="5">输入框</div>
    <div nz-col class="text-left" nzSpan="5">
      <dhl-input name="输入框" code="name3" required [(value)]="name3"
                 labelWidth=4></dhl-input>
    </div>
  </div>

  <nz-divider></nz-divider>

  <div nz-row>
    <div nz-col nzSpan="5">日期选择</div>
    <div nz-col class="text-left" nzSpan="6">
      <dhl-date name="日期" code="circle" [value]="dateValue" [type]="dateSingle" [showTime]="true"
                labelWidth="5"></dhl-date>
      <dhl-date name="年" code="year" [value]="dateYearValue" [type]="dateYear" labelWidth="5"></dhl-date>
    </div>
    <div nz-col class="text-left" nzSpan="6">
      <dhl-date name="日期范围" code="circleRange" [value]="dateRangeValue" [type]="dateRange"
                labelWidth="6"></dhl-date>
      <dhl-date name="月" code="month" [value]="dateMonthValue" [type]="dateMonth" labelWidth="6"></dhl-date>
    </div>
    <div nz-col class="text-left" nzSpan="7">
      <dhl-date name="日期时间" code="circleTime" [value]="dateTimeValue" [type]="dateSingle" [showTime]="true"
                labelWidth="7"></dhl-date>
      <dhl-date name="周" code="week" [value]="dateWeekValue" [type]="dateWeek" labelWidth="7"></dhl-date>
    </div>
  </div>


  <nz-divider></nz-divider>

  <div nz-row>
    <div nz-col nzSpan="5">下拉选择{{selectValue1}}</div>
    <div nz-col class="text-left" nzSpan="6">
      <dhl-select
        name="单选"
        code="selectSingle"
        [options]="options"
        [(value)]="selectValue1"
        labelWidth="5"></dhl-select>
    </div>

    <div nz-col class="text-left" nzSpan="10">
      <dhl-select
        name="多选{{selectValue2}}"
        code="selectMul"
        [options]="options"
        [(value)]="selectValue2"
        [type]="selectMultiple"
        labelWidth="8"></dhl-select>
    </div>

  </div>

  <nz-divider></nz-divider>

  <div nz-row>
    <div nz-col nzSpan="5">树形下拉{{selectValue3}}</div>
    <div nz-col class="text-left" nzSpan="6">
      <dhl-select name="树形单选"
                  code="selectTreeSingle"
                  [treeData]="datas"
                  [type]="selectTree"
                  [(value)]="selectValue3"
                  labelWidth="5"></dhl-select>
    </div>
    <div nz-col class="text-left" nzSpan="10">
      <dhl-select name="树形多选{{selectValue4}}"
                  code="selectTreeMul"
                  [treeData]="datas"
                  [type]="selectTreeMul"
                  [(value)]="selectValue4"
                  labelWidth="8"></dhl-select>
    </div>
  </div>

  <nz-divider></nz-divider>

  <div nz-row>
    <div nz-col nzSpan="5">单选</div>
    <div nz-col class="text-left" nzSpan="6">
      <dhl-radio
        name="字母"
        code="radioLetter"
        [disabled]="radioDisabled"
        [options]="radios"
        [(value)]="radioValue"
        labelWidth="5"></dhl-radio>
    </div>
  </div>

  <nz-divider></nz-divider>

  <div nz-row>
    <div nz-col nzSpan="5">多选</div>
    <div nz-col class="text-left" nzSpan="6">
      <dhl-check
        name="字母"
        code="checkLetter"
        [disabled]="checkDisabled"
        [options]="checks"
        [value]="checkValue"
        labelWidth="5"></dhl-check>
    </div>
  </div>

  <nz-divider></nz-divider>


  <div nz-row>
    <div nz-col nzSpan="5">上传下载</div>
    <div nz-col class="text-left" nzSpan="10">
      <dhl-upload name="文件上传" [disabled]="checkDisabled" [accept]="'.xls,.xlsx'" [value]="fileId"
                  [max]="3"
                  labelWidth="3"></dhl-upload>
    </div>
    <div nz-col class="text-left" nzSpan="6">
      <dhl-upload name="上传" [type]="uploadTypeBTN" [value]="fileId" [uploadPath]="'main/uploadfile'"
                  labelWidth="3"></dhl-upload>
    </div>

  </div>


  <nz-divider></nz-divider>

  <div nz-row>
    <div nz-col nzSpan="5">树形控件</div>
    <div nz-col class="text-left" nzSpan="5">
      <dhl-tree name="单选"
                code="treeSingleValue"
                [isCheck]="true"
                [value]="singleTreeValue"
                [treeData]="treeData"
                [expandKeys]="['0-0', '0-1', '0-2']"
                labelWidth="3"></dhl-tree>
    </div>
    <div nz-col class="text-left" nzSpan="5">
      <dhl-tree name="多选"
                code="treeMultValue"
                [isCheck]="true"
                [value]="treeValue"
                [domain]="'menu'"
                (nodeClick)="treeClick($event)"
                labelWidth="3"></dhl-tree>
    </div>

  </div>
  <nz-divider></nz-divider>
  <div nz-row>
    <div nz-col nzSpan="2">穿梭框</div>
    <div nz-col class="text-left" nzSpan="22">
      <dhl-transfer name="用户选择"
                    code="treeSingleValue"
                    [domain]="'account'"
                    [fields]="fields"
                    [value]="[1,2,3,9]"
                    [queryWidth]="[[10,10]]"
                    labelWidth="2">
        <dhl-input name="名字" code="filter_name_like_s" labelWidth=7></dhl-input>
        <dhl-input name="工号" code="filter_userNo_eq_s" labelWidth=7></dhl-input>
      </dhl-transfer>
    </div>
  </div>

  <nz-divider></nz-divider>

  <div nz-row>
    <div nz-col nzSpan="2">柱形图</div>
    <div nz-col class="text-left" nzSpan="22">
      <div id="echarts" echarts style="width:300px;height: 300px"></div>
    </div>
  </div>


  <nz-divider></nz-divider>
  <div nz-row>
    <div nz-col nzSpan="5">富文本框</div>
    <div nz-col class="text-left" nzSpan="16">
      <dhl-editor [name]="'富文本框'" [labelWidth]="4"></dhl-editor>
    </div>
  </div>

  <nz-divider></nz-divider>
  <div nz-row>
    <div nz-col nzSpan="5">富文本框</div>
    <div nz-col class="text-left" nzSpan="16">
      <dhl-editor [name]="'富文本框'" [labelWidth]="4"></dhl-editor>
    </div>
  </div>

</div>









